<!-- 待支付 -->
<template>
  <div class="index-container">
    <div
      v-for="(item, index) in list"
      :key="index"
      style="margin-top: 15px"
      @click="todetail(item)"
    >
      <div class="card-head">
        <span :class="parseStatus(item.status).classl">
          {{ parseStatus(item.status).label1 }}
          <van-count-down :time="item.time" class="head_djs_span" />
        </span>
        <span :class="parseStatus(item.status).classr">{{ parseStatus(item.status).label }}</span>
      </div>
      <van-card :price="item.amount" :desc="item.sku_name" :title="item.name" :thumb="item.image" />
    </div>
    <div class="none" v-if="list.length < 1">
      <img :src="require('@/assets/images/quesheng-kong.png')" alt />
      <div>暂无订单</div>
    </div>
  </div>
</template>

<script>
import { getOrders } from '@/api/mine/order'
import { parseStatus } from '@/utils/status/mineOrder'
export default {
  components: {},
  data() {
    return {
      queryParams: {
        status: 0
      },
      list: []
    }
  },

  computed: {},

  mounted() {
    this.fetchList()
  },

  methods: {
    // 获取个人信息
    fetchList() {
      getOrders(this.queryParams).then(res => {
        const row = res.data.lists
        row.map((b, index) => {
          b.time = (b.addtime + res.data.pay_overtime - res.data.server_time) * 1000
        })
        this.list = row
      })
    },
    parseStatus,
    todetail(row) {
      this.$router.push({ path: '/unpaid-detail', query: { row: encodeURIComponent(JSON.stringify(row)) } })
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  padding: 0 15px;
}
.van-image {
  border-radius: 5px;
  overflow: hidden;
}
.card-head {
  width: 100%;
  height: 40px;
  line-height: 40px;
  // padding: 0 10px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .card-head-l {
    float: left;
    margin-left: 10px;
    font-size: 13px;
    font-weight: 500;
  }
  .card-head-r {
    float: right;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 500;
  }
  .head_djs_span {
    display: inline-block;
    color: #ff0000;
  }
}
::v-deep .van-card {
  background-color: #fff;
  margin-top: 0;
}
::v-deep .van-card__thumb {
  width: 125px;
  height: 80px;
  img {
    border-radius: 0;
  }
}
::v-deep .van-card__price {
  font-size: 14px;
  font-weight: 500;
  color: #11a8a4;
}
::v-deep .van-card__title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
::v-deep .van-card__desc {
  font-size: 12px;
  font-weight: 500;
  color: #999999;
}
</style>
